<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书馆座位预约系统 - 座位选择</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/seat-selection.css">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <header class="main-header">
        <div class="header-container">
            <div class="logo">
                <i class="fa fa-book"></i>
                <span>图书馆座位预约系统</span>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html"><i class="fa fa-tachometer"></i> 首页</a></li>
                    <li class="active"><a href="seat-selection.html"><i class="fa fa-th-large"></i> 座位选择</a></li>
                    <li><a href="booking-management.html"><i class="fa fa-calendar"></i> 预约管理</a></li>
                    <li><a href="user-profile.html"><i class="fa fa-user"></i> 个人中心</a></li>
                </ul>
            </nav>
            <div class="user-info">
                <span class="welcome">欢迎，用户</span>
                <div class="avatar">
                    <i class="fa fa-user-circle"></i>
                </div>
            </div>
        </div>
    </header>

    <main class="main-content">
        <div class="container">
            <section class="selection-header">
                <h1>座位选择</h1>
                <div class="selection-controls">
                    <div class="date-selector">
                        <label for="booking-date">选择日期：</label>
                        <input type="date" id="booking-date">
                    </div>
                    <div class="time-selector">
                        <label for="booking-time">选择时间段：</label>
                        <select id="booking-time">
                            <option value="morning">上午 (09:00-12:00)</option>
                            <option value="afternoon">下午 (14:00-17:00)</option>
                            <option value="evening">晚上 (18:00-21:00)</option>
                            <option value="all-day">全天 (09:00-21:00)</option>
                        </select>
                    </div>
                </div>
            </section>

            <!-- 楼层选择器 -->
            <section class="floor-selector">
                <div class="floor-tabs">
                    <button class="floor-tab active" data-floor="1">1楼</button>
                    <button class="floor-tab" data-floor="2">2楼</button>
                    <button class="floor-tab" data-floor="3">3楼</button>
                    <button class="floor-tab" data-floor="4">4楼</button>
                    <button class="floor-tab" data-floor="5">5楼</button>
                </div>
            </section>

            <!-- 座位地图 -->
            <section class="seat-map">
                <div class="map-container">
                    <!-- 图书馆区域图例 -->
                    <div class="map-legend">
                        <div class="legend-item">
                            <span class="seat-icon available"></span>
                            <span>可预约</span>
                        </div>
                        <div class="legend-item">
                            <span class="seat-icon occupied"></span>
                            <span>已被预约</span>
                        </div>
                        <div class="legend-item">
                            <span class="seat-icon selected"></span>
                            <span>已选择</span>
                        </div>
                        <div class="legend-item">
                            <span class="seat-icon disabled"></span>
                            <span>不可用</span>
                        </div>
                    </div>

                    <!-- 座位网格 -->
                    <div class="seat-grid">
                        <!-- 地图可视化：显示书架、桌椅等布局 -->
                        <div class="map-visualization">
                            <!-- 前台区域 -->
                            <div class="map-area reception">
                                <div class="area-label">前台</div>
                            </div>

                            <!-- 书架区域 -->
                            <div class="map-area bookshelf horizontal"></div>
                            <div class="map-area bookshelf horizontal"></div>
                            <div class="map-area bookshelf vertical"></div>
                            <div class="map-area bookshelf vertical"></div>

                            <!-- 座位网格 -->
                            <div class="seats-container">
                                <!-- 第一排座位 -->
                                <div class="seat-row">
                                    <div class="seat available" data-seat="A1"></div>
                                    <div class="seat available" data-seat="A2"></div>
                                    <div class="seat occupied" data-seat="A3"></div>
                                    <div class="seat occupied" data-seat="A4"></div>
                                    <div class="seat available" data-seat="A5"></div>
                                </div>
                                <!-- 第二排座位 -->
                                <div class="seat-row">
                                    <div class="seat occupied" data-seat="B1"></div>
                                    <div class="seat available" data-seat="B2"></div>
                                    <div class="seat available" data-seat="B3"></div>
                                    <div class="seat occupied" data-seat="B4"></div>
                                    <div class="seat available" data-seat="B5"></div>
                                </div>
                                <!-- 第三排座位 -->
                                <div class="seat-row">
                                    <div class="seat available" data-seat="C1"></div>
                                    <div class="seat available" data-seat="C2"></div>
                                    <div class="seat disabled" data-seat="C3"></div>
                                    <div class="seat available" data-seat="C4"></div>
                                    <div class="seat available" data-seat="C5"></div>
                                </div>
                                <!-- 第四排座位 -->
                                <div class="seat-row">
                                    <div class="seat occupied" data-seat="D1"></div>
                                    <div class="seat occupied" data-seat="D2"></div>
                                    <div class="seat available" data-seat="D3"></div>
                                    <div class="seat available" data-seat="D4"></div>
                                    <div class="seat available" data-seat="D5"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 选中座位信息 -->
            <section class="selected-seat-info">
                <div class="info-card">
                    <h3>选中座位信息</h3>
                    <div id="selected-seat-details">
                        <p class="no-seat-selected">请选择一个座位</p>
                    </div>
                    <button id="confirm-booking" class="btn btn-primary" disabled>确认预约</button>
                </div>
            </section>
        </div>
    </main>

    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2024 图书馆座位预约系统. 保留所有权利.</p>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script src="js/seat-selection.js"></script>
</body>
</html>